import { createElement, HTMLAttributes, type FC } from 'react';
import classNames from 'classnames';

import { revealDefaultProps } from './defaultProps';
import type { RevealOptions } from './type';
import RevealContent from './RevealContent';

export interface RevealProps extends RevealOptions, HTMLAttributes<HTMLDivElement> {}

interface RevealInterface extends FC<RevealProps> {
  Content: typeof RevealContent;
}

const Reveal: RevealInterface = (props) => {
  const { className, animated, image, circular, active, disabled, instant, children, forwardedRef, ...revealProps } =
    props;

  return createElement(
    'div',
    {
      ref: forwardedRef,
      className: classNames(
        'ui',
        image,
        { circular, active, disabled, instant },
        animated,
        'reveal',
        { image },
        className,
      ),
      ...revealProps,
    },
    children,
  );
};

Reveal.displayName = 'Reveal';
Reveal.defaultProps = revealDefaultProps;

Reveal.Content = RevealContent;

export default Reveal;
